<template>
  <q-page class="q-pa-md">
    <q-btn class="float-right" color="primary" icon="arrow_back" outline title="返回" to="/" />
    <div class="q-pb-md text-h5">集箱</div>
    <!--错误提示-->
    <q-banner class="text-white bg-red q-mb-sm" dense inline-actions v-if="serverErrorMessage">
      {{ serverErrorMessage }}
      <template v-slot:action>
        <q-btn @click="serverErrorMessage = ''" dense flat icon="close" size="sm" />
      </template>
    </q-banner>
    <!--成功提示-->
    <q-banner class="text-white bg-green q-mb-sm" dense inline-actions v-if="serverSuccessMessage">
      {{ serverSuccessMessage }}
      <template v-slot:action>
        <q-btn @click="serverSuccessMessage = ''" dense flat icon="close" size="sm" />
      </template>
    </q-banner>
    <!--其他提示-->
    <q-banner class="text-white bg-info q-mb-sm" dense inline-actions v-if="caseMessage">
      {{ caseMessage }}
      <template v-slot:action>
        <q-btn @click="caseMessage = ''" dense flat icon="close" size="sm" />
      </template>
    </q-banner>
    <div class="row q-col-gutter-sm col-12">
      <div class="col-12">
        <q-icon color="red" name="fas fa-asterisk" size="10px" />
        <span>箱号</span>
        <easy-input v-model="$d.caseId" :loading="caseIdLoadingState" ref="caseId" @focus="fx.ui.select"
          :error="v$.caseId.$error" :error-message="e$(v$.caseId.$errors)" @keyup.enter="validCaseId" :disable="caseIdLoadingState"/>
      </div>
      <div class="col-12">
        <q-icon color="red" name="fas fa-asterisk" size="10px" v-if="!$d.caseIdInfo.consolidationLpn" />
        <span>容器号</span>
        <easy-input v-model="$d.consolidationLpn" @keyup.enter="doConsolidate" :error="v$.consolidationLpn.$error"
          :error-message="e$(v$.consolidationLpn.$errors)"/>
      </div>
      <div class="col-12">
        <q-btn class="full-width" color="primary" label="确定集箱"
          @click="doConsolidate" :loading="submittingState" :disable="!$d.caseIdInfo.isAbleToConsolidate"/>
      </div>
    </div>
  </q-page>
</template>

<script lang="ts">
export default {
  name: 'PackConsolidateStd'
}
</script>

<script lang="ts" setup>

import {computed, nextTick, reactive, ref} from 'vue'
import useVuelidate from '@vuelidate/core'
import {playErrorSound, playSuccessSound, playBeepSound} from '@njt/wms/helper/audio'
import {QInput} from 'quasar'
import _ from 'lodash'
import {ConsolidateInfo} from '../../defs/consolidateInfo'

let serverErrorMessage = ref('')
let serverSuccessMessage = ref('')
let caseMessage = ref('')
let submittingState = ref(false)
let caseIdLoadingState = ref(false)

const $d = reactive({
  caseId: '',
  consolidationLpn: null as string | null,
  caseIdInfo: {} as ConsolidateInfo
})

const validators = $f.validators
const rules = {
  caseId: {
    required: validators.required
  },
  consolidationLpn: {
    alwaysRight: validators.alwaysRight
  }
}
const valResult = reactive({
  consolidationLpn: ''
})
const v$ = useVuelidate(rules, computed(() => $d), {$autoDirty: true, $externalResults:valResult})

const doConsolidate = function () {
  serverErrorMessage.value = ''
  serverSuccessMessage.value = ''
  caseMessage.value = ''
  void v$.value.$validate()
    .then((valRes) => {
      if ($d.consolidationLpn) {
        if (valRes) {
          submittingState.value = true
          let params = {
            caseId: $d.caseId,
            consolidationLpn: $d.consolidationLpn
          }
          $f.axios
            .post<ConsolidateInfo>('/wms/work/order/do-consolidate',params)
            .then((resp) => {
              serverSuccessMessage.value = `集箱成功,箱号:${$d.caseId}`
              caseMessage.value = `请将此箱放入容器号${$d.consolidationLpn},该出库单${resp.data.orderNo}共${resp.data.orderPacksCount}
          箱,目前集箱(下线)${resp.data.consolidationOrderPacksCount}箱,剩余${resp.data.orderPacksCount - resp.data.consolidationOrderPacksCount}箱。`
              if (resp.data.orderPacksCount - resp.data.consolidationOrderPacksCount === 0) {
                playSuccessSound()
              } else {
                playBeepSound()
              }
              $d.caseId = ''
              $d.consolidationLpn = ''
            })
            .catch((err) =>{
              playErrorSound()
              serverErrorMessage.value = $f.getAxiosErrMsg(err)
            })
            .finally(() => {
              submittingState.value = false
              resetCaseIdInfo()
              void nextTick(() => {
                caseId.value && caseId.value.focus()
                v$.value.$reset()
              })
            })
        } else {
          playErrorSound()
        }
      } else {
        playErrorSound()
        valResult.consolidationLpn = '容器号不能为空'
      }
    })
}
const validCaseId = function () {
  serverErrorMessage.value = ''
  serverSuccessMessage.value = ''
  caseMessage.value = ''
  void v$.value.$validate()
    .then((valRes) => {
      if (valRes) {
        caseIdLoadingState.value = true
        let params = {
          caseId: $d.caseId
        }
        let focusOnWhenDone = ''
        $f.axios
          .get<ConsolidateInfo>('/wms/work/order/get-consolidate-info-by-case-id',{params})
          .then((resp) => {
            $d.caseIdInfo = resp.data
            $d.consolidationLpn = _.cloneDeep($d.caseIdInfo.consolidationLpn)
            if ($d.caseIdInfo.consolidationOrderPacksCount === 0) {
              caseMessage.value = '请指定一个容器号，点确认完成集箱'
            } else if ($d.consolidationLpn){
              doConsolidate()
            }
          })
          .catch((err) => {
            playErrorSound()
            serverErrorMessage.value = $f.getAxiosErrMsg(err)
            resetCaseIdInfo()
            focusOnWhenDone = 'caseId'
          })
          .finally(() => {
            caseIdLoadingState.value = false
            if (focusOnWhenDone !== '') {
              void nextTick(() => {
                caseId.value && caseId.value.focus()
              })
            }
          })
      } else {
        playErrorSound()
      }
    })
}
const resetCaseIdInfo = function () {
  $d.caseIdInfo = {} as ConsolidateInfo
}

const caseId = ref<QInput | null>(null)
const fx = $f
const e$ = $f.getFieldErrStr
</script>

<style scoped>

</style>
